<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Skeleton from "./Skeleton.svelte";
    import { fn } from "storybook/test";
    import Icon from "@iconify/svelte";
    import SkeletonAvatar from "./SkeletonAvatar.svelte";
    import { Avatar } from "../Avatar";
    import SkeletonImage from "./SkeletonImage.svelte";
    import { Image } from "../Image";
    import SkeletonTitle from "./SkeletonTitle.svelte";
    import SkeletonParagraph from "./SkeletonParagraph.svelte";
    import SkeletonButton from "./SkeletonButton.svelte";
    import { Button } from "../Button";
    import img1 from "../../assets/images/1.jpg";
    import { Switch } from "../Switch";

    const { Story } = defineMeta({
        title: "Components/Layout/Skeleton",
        component: Skeleton,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let loading = $state(true);
</script>

<Story name="Default">
    {#snippet template(args)}
        <div>
            <Skeleton {loading}>
                {#snippet placeholder()}
                    <SkeletonAvatar />
                {/snippet}
                <Avatar style="color: blue; margin-bottom: 10px">U</Avatar>
            </Skeleton>
            <br />
            <Skeleton width="150px" height="150px" {loading}>
                {#snippet placeholder()}
                    <SkeletonImage />
                {/snippet}
                <Image src={img1} width="150px" height="150px" alt="avatar" />
            </Skeleton>
            <br />
            <Skeleton style="width: 80px" {loading}>
                {#snippet placeholder()}
                    <SkeletonTitle style="margin-bottom: 10px" />
                {/snippet}
                <h4 style="margin-bottom: 0">CUI/Svelte</h4>
            </Skeleton>
            <br />
            <Skeleton width="240px" {loading}>
                {#snippet placeholder()}
                    <SkeletonParagraph rows={2} />
                {/snippet}
                <p style="width: 240px">精心打磨每一个组件的用户体验，从用户的角度考虑每个组件的使用场景。</p>
            </Skeleton>
            <br />
            <Skeleton {loading}>
                {#snippet placeholder()}
                    <SkeletonButton />
                {/snippet}
                <Button>Button</Button>
            </Skeleton>
        </div>
        <div>
            <Switch bind:checked={loading} />
        </div>
    {/snippet}
</Story>

<Story name="Avatar">
    {#snippet template(args)}
        <Skeleton loading={true}>
            {#snippet placeholder()}
                <div style="display: flex; align-items: flex-start">
                    <SkeletonAvatar shape="square" style="margin-right: 12px" />
                    <div>
                        <SkeletonTitle width="120px" style="margin-bottom: 12px; margin-top: 12px" />
                        <SkeletonParagraph width={["240px", "220px", "180px"]} rows={3} />
                    </div>
                </div>
            {/snippet}
            <div style="display: flex; align-items: flex-start">
                <Avatar style="margin-right: 12px">UI</Avatar>
                <div>
                    <h3>Semi UI</h3>
                    <p>Hi, Bytedance dance dance.</p>
                    <p>Hi, Bytedance dance dance.</p>
                    <p>Hi, Bytedance dance dance.</p>
                </div>
            </div>
        </Skeleton>
    {/snippet}
</Story>
